<template>
    <div class="subject">
        <div class="top">
            <span class="nj">年级：</span>
            <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-button class="btn" @click="inquire" type="primary">查询</el-button>
            <el-button class="btn" @click="addList" type="primary">添加</el-button>
        </div>
        <div class="content">
            <el-table :data="tableData" border style="width:100%" :header-cell-style="{padding:'8px !important'}">
                <el-table-column fixed prop="id" label="ID">
                </el-table-column>
                <el-table-column prop="name" label="学科">
                </el-table-column>
                <el-table-column prop="levelName" label="年级">
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="redact(scope.row)">编辑</el-button>
                        <el-button @click="handleClick(scope.row)" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="botton">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage1" :page-sizes="[5, 10, 20, 30, 50]" :page-size="10"
                layout="total, sizes, prev, pager, next, jumper" :total="15">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: '',
            options: [
                {
                    level:1,
                    value: '一年级'
                },
                {
                    level:2,
                    value: '二年级'
                },
                {
                    level:3,
                    value: '三年级'
                },
                {
                    level:4,
                    value: '四年级'
                },
                {
                    level:5,
                    value: '五年级'
                },
                {
                    level:6,
                    value: '六年级'
                },
                {
                    level:7,
                    value: '初一'
                },
                {
                    level:8,
                    value: '初二'
                },
                {
                    level:9,
                    value: '初三'
                },
                {
                    level:10,
                    value: '高一'
                },
                {
                    level:11,
                    value: '高二'
                },
                {
                    level:12,
                    value: '高三'
                }
            ],
            tableData: [],
            tableData1: [],
            currentPage1: 1,
            pageIndex: 1,
            pageSize: 10,
        }
    },
    methods: {
        // 删除
        handleClick(row) {
            this.axios.post(`/api/admin/education/subject/delete/${row.id}`).then(res=>{
                console.log(res);
            })
            // let index = this.tableData.indexOf(row)
            // this.tableData.splice(index, 1)
        },
        // 每页几条
        handleSizeChange(val) {
            this.pageSize = val
            this.http()
        },
        // 第几页
        handleCurrentChange(val) {
            this.pageIndex = val
            this.http()
        },
        // 添加
        addList() {
            window.sessionStorage.setItem('row', "true")
            this.$router.push("/education/redact")
        },
        // 编辑
        redact(row) {
            window.sessionStorage.setItem('row', JSON.stringify(row))
            this.$router.push("/education/redact")
        },
        // 查询
        inquire() {
            let arr1 = []
            this.tableData1.forEach(item => {
                if (item.levelName == this.value) {
                    arr1.push(item)
                }
            })
            this.value != "" ? this.tableData = arr1 : this.tableData
        },
        http() {
            this.axios({
                method: "post",
                url: '/api/admin/education/subject/page',
                data: {
                    "level": null,  //年级
                    "pageIndex": this.pageIndex,
                    "pageSize": this.pageSize
                }
            }).then(res => {
                console.log(res);
                let data = res.data.response.list
                console.log(data);
                this.tableData = data
                this.tableData1 = data
            })
        }
    },
    mounted() {
        this.http()
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .el-table__cell{
    padding:2px !important;
}
.subject {
    .top {
        margin-left: 15px;

        .nj {
            font-size: 14px;
            font-weight: 100;
        }

        .btn {
            margin-left: 8px;
        }
    }

    .content {
        margin: 20px 15px 25px;
    }
}
</style>